<template>
 <div class="dialogPop">
      <el-dialog :visible.sync="editData.dialogAdd"  title="编辑"
      :before-close="handleClose" size="tiny">
        <el-form :model="editData" 
        :rules="rulesAdd" ref="editData" label-width="124px">
                <el-row :gutter="20">
                    <el-col :span="20">
                        <el-form-item label="赠送积分" prop="point">
                             <el-popover placement="top-start" trigger="focus" content="赠送积分为正整数！">
                                <el-input v-model="editData.point" placeholder="请输入赠送积分" slot="reference"></el-input>
                                       <!-- <el-input v-model="dataForm.price" placeholder="请输入商品价格(积分)"  slot="reference" :maxlength="6"></el-input> -->
                            </el-popover>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="20">
                        <el-form-item label="赠送缘由">
                            <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入赠送缘由，20字以内"
                                v-model="editData.giveDesc" :maxlength="20">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <p class="btn">
            <el-button @click="resetFormdelDialogAdd('editData')">取 消</el-button>
            <el-button type="primary" @click="editBtn('editData')" :loading="loadingBtn">确 认</el-button>
          </p>
        </div>
      </el-dialog>
    </div>
</template>
<script>
// import {givePoint} from 'api/creditShop';
export default {
    props: {
        editData: {
            default() {
                return {
                    dialogAdd: false // 默认不显示
                }
            },
            required: true
        }
    },
    data() {
        return {
            loadingBtn: false, // 确定按钮的 loading
            rulesAdd: {
                point: [{ required: true, message: '请输入赠送积分', trigger: 'blur' },
                    // { pattern: /^([^0。,.a-zA-Z]?\d|[1-9]\d{1,4})$|^100000$/, message: '赠送积分为0~100000的整数',
                    { pattern: /^[1-9]\d*$/, message: '赠送积分为正整数',
                        trigger: 'blur,change'}
                  // { pattern: /^(?:0|[1-9][0-9]?|100)$/, message: '赠送积分为0~100000的整数', trigger: 'blur,change'}
                ]
               
            }
        }
    },
    methods: {
      // 编辑弹窗的确定按钮
        editBtn(editData) {
            this.$refs[editData].validate((valid) => {
                if (valid) {// 验证通过
                    this.loadingBtn=true;
                    this.$emit('updatAddData'); // 更新父组件的列表
                    this.$message.success('编辑成功！');
                    this.loadingBtn=false;
                    this.delDialogAdd()
                } 
            });
        },
        // 弹出框的关闭按钮
        handleClose(done) {
            this.$refs.editData.resetFields();
            this.delDialogAdd();
        },
        resetFormdelDialogAdd(editData) {
            this.$refs[editData].resetFields();
            this.delDialogAdd();
        },
        // 还原弹窗信息
        delDialogAdd() {
            this.editData.dialogAdd = false;
            this.editData.point='';
            this.editData.giveDesc='';
        }
    }
}
</script>

<style lang="scss" scoped>
</style>

